<div style="padding: 3em">
  <div style="margin-bottom: 1em">
    <span
      style="font-size: 1.5em; font-weight: 700; color: 444; margin-right: 2em; cursor: pointer"
      (click)="sub = 'all'; switchToHot()"
      >REDDIT</span
    >
    <mat-form-field
      appearance="outline"
      style="width: 200px; margin-right: 2em"
    >
      <mat-label>Sub</mat-label
      ><input
        matInput
        (keyup.enter)="load()"
        name="sub"
        ngDefaultControl
        [(ngModel)]="sub"
      />
    </mat-form-field>
    <span *ngIf="hot">
      [ hot ]&nbsp;
      <a href="#" (click)="switchToNew()">new</a>
    </span>
    <span *ngIf="!hot">
      <a href="#" (click)="switchToHot()">hot</a>
      &nbsp;[ new ]
    </span>
    <span style="margin-left: 4em"
      ><a href="https://github.com/crufter/reddit">Source code</a></span
    >
    <span style="margin-left: 2em"
      ><a href="https://crufter.com/toy-open-source-reddit-clone"
        >Blog post</a
      ></span
    >
  </div>
  <div flexLayout="row" fxLayout.lt-md="column" fxLayoutAlign="space-between">
    <div fxFlex="70%" fxFlex.lt-md="100%">
      <div *ngFor="let post of posts">
        <mat-card style="margin-bottom: 1em; background: #fafafa">
          <div flexLayout="row">
            <div>
              <mat-icon style="cursor: pointer" (click)="vote(post, true, true)"
                >keyboard_arrow_up</mat-icon
              >
              <br /><span
                style="
                  display: inline-block;
                  padding-left: 0.55em;
                  padding-bottom: 0.5em;
                  padding-top: 0.4em;
                  text-align: center;
                "
                >{{ post.score }}</span
              >
              <mat-icon
                style="cursor: pointer"
                (click)="vote(post, true, false)"
                >keyboard_arrow_down</mat-icon
              >
            </div>
            <div fxFlex="0 1">
              <mat-card-title>{{ post.title }} </mat-card-title>
              <mat-card-subtitle
                ><span *ngIf="post.url"
                  ><a href="{{ post.url }}">{{ post.url }}</a> &nbsp;</span
                >Posted by <span *ngIf="post.userName">{{ post.userName }}</span
                ><span *ngIf="!post.userName">an anonymous coward</span> to
                <a href="#" (click)="filterSub(post.sub)">{{ post.sub }}</a>
                {{ post.created | timeago }}</mat-card-subtitle
              >
              <mat-card-content>{{ post.content }}</mat-card-content>
              <a href="#"(click)="reveal(post); false"
                >{{ post.commentCount ? post.commentCount : 0 }} Comments</a
              >
              <div *ngIf="post.expanded" style="width: 100%">
                <br /><br />
                <mat-form-field
                  appearance="outline"
                  style="width: 100%; height: 3em"
                >
                  <mat-label>Comment</mat-label
                  ><textarea
                    style="width: 100%; height: 3em"
                    matInput
                    name="comment"
                    ngDefaultControl
                    [(ngModel)]="comment"
                  ></textarea>
                </mat-form-field>
                <br />
                <br />
                <button
                  (click)="submitComment(post)"
                  color="primary"
                  mat-raised-button
                >
                  Submit
                </button>
                <br />
                <br />
                <br />
                <mat-card
                  style="margin-bottom: 1em; background: #fefefe"
                  *ngFor="let comment of post.comments"
                >
                  <div flexLayout="row">
                    <div>
                      <mat-icon
                        style="cursor: pointer"
                        (click)="vote(comment, false, true)"
                        >keyboard_arrow_up</mat-icon
                      >
                      <br /><span
                        style="
                          display: inline-block;
                          padding-left: 0.55em;
                          padding-bottom: 0.5em;
                          padding-top: 0.4em;
                          text-align: center;
                        "
                        >{{ comment.score }}</span
                      >
                      <mat-icon
                        style="cursor: pointer"
                        (click)="vote(comment, false, false)"
                        >keyboard_arrow_down</mat-icon
                      >
                    </div>
                    <div fxFlex="0 1">
                      <mat-card-subtitle
                        >{{ comment.userName }}
                        {{ comment.created | timeago }}</mat-card-subtitle
                      >
                      {{ comment.content }}
                    </div>
                  </div>
                </mat-card>
              </div>
            </div>
          </div>
        </mat-card>
      </div>
    </div>
    <div fxFlex="29%" fxFlex.lt-md="100%">
      <mat-card style="background: #fafafa">
        <mat-card-title>Submit new post </mat-card-title>
        <mat-card-subtitle
          >You can post anonymously without registration</mat-card-subtitle
        >
        <mat-form-field appearance="outline">
          <mat-label>Title</mat-label
          ><input
            matInput
            name="title"
            ngDefaultControl
            [(ngModel)]="post.title"
          />
        </mat-form-field>
        <br />
        <mat-form-field appearance="outline">
          <mat-label>Url (optional)</mat-label
          ><input matInput name="url" ngDefaultControl [(ngModel)]="post.url" />
        </mat-form-field>
        <br />
        <mat-form-field appearance="outline">
          <mat-label>Sub</mat-label
          ><input matInput name="sub" ngDefaultControl [(ngModel)]="post.sub" />
        </mat-form-field>
        <br />
        <mat-form-field appearance="outline">
          <mat-label>Content (optional)</mat-label
          ><textarea
            matInput
            name="content"
            ngDefaultControl
            [(ngModel)]="post.content"
          ></textarea>
        </mat-form-field>
        <br />
        <button (click)="submit()" color="primary" mat-raised-button>
          Submit
        </button>
      </mat-card>
      <br />
      <mat-card *ngIf="userID">
        Logged in as {{ username }}.
        <a href="#" (click)="logout()">Log out</a></mat-card
      >
      <mat-card *ngIf="!userID">
        <mat-card-title>Login/Register</mat-card-title>
        <mat-card-subtitle
          >Only logged in users can upvote and downvote posts</mat-card-subtitle
        >
        <mat-form-field appearance="outline">
          <mat-label>Username</mat-label
          ><input
            matInput
            name="username"
            ngDefaultControl
            [(ngModel)]="username"
          />
        </mat-form-field>
        <br />
        <mat-form-field appearance="outline">
          <mat-label>Password</mat-label
          ><input
            matInput
            name="password"
            ngDefaultControl
            type="password"
            [(ngModel)]="password"
          />
        </mat-form-field>
        <br />
        <button (click)="login()" color="primary" mat-raised-button>
          Login / Register
        </button>
      </mat-card>
    </div>
  </div>
</div>
